<template>
	<view class=" text-white">
		<z-paging ref="paging" v-model='list' @query="getList">
			<template #top>
				<view class="px-12">
					<view class=" flex flex-y-center text-center gap-8 fs-14 ">
						<view class=" round-8  px-12 py-6" @click="onChange(item)" :class="{
							 'gradient':type == item.value,
								 'bg-black-1': type != item.value
										}" v-for="(item,index) in tabsList" :key='index'>
							{{item.label}}
						</view>
					</view>
				</view>
			</template>
			<!-- #ifdef MP-WEIXIN -->
			<view class="p-12 overflow-hidden" v-if="WEBCONFIG?.wx_ad_status.includes('wx_video_new') ">
				<ad :unit-id="WEBCONFIG?.wx_video_new" ad-theme="white"></ad>
			</view>
			<!-- #endif -->
			<view class="flex flex-column gap-8 p-12">
				<view v-for="(item,index) in list" :key='item.id'
					class="bg-black-1 round-12 p-12 flex flex-y-center flex-x-space-between ">
					<view class="flex flex-column gap-6">
						<text>{{item.notes}}</text>
						<text class="fs-14 text-grey">{{item.create_at}}</text>
					</view>
					<text class="fs-20 fw-600"
						:class="item.type==0?'':'brown'">{{item.type==0?'-':'+'}}{{item.number}}</text>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import useZPaging from "@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js";
	import { ref } from 'vue';
	import { $http } from '@/utils';
	import { onPageScroll, onReachBottom } from '@dcloudio/uni-app'
	import { useRefs, useWebConfigStore } from '@/stores'
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const tabsList = [
		{ label: '全部', value: -1 },
		{ label: '支出', value: 0 },
		{ label: '收入', value: 1 },
	];
	const list = ref([])
	const paging = ref(null)
	const type = ref(-1)
	useZPaging(paging)
	const getList = (page, limit) => {
		uni.showLoading({
			title: '加载中...'
		})
		$http.get('Bill/getBalanceList', { page: page, limit: limit, type: type.value }).then(res => {
			paging.value.complete(res.data)
		})
	}

	const onChange = (e) => {
		type.value = e.value
		paging.value.reload()
	}
</script>

<style>
	.brown {
		color: #FFB464;
	}
</style>